<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Our notes</title>
  <link href="/assets/css/bootstrap.css" rel="stylesheet">
  <style type="text/css">
    body {
      padding-top: 60px;
      padding-bottom: 40px;
      }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
  <script src="http://malsup.github.com/jquery.form.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
	$("#form_add").ajaxForm({
    beforeSubmit: validate,
    success: note_added,
    error: server_validation_failed});
    });
function validate(formData, jqForm, options) {
    for (var i=0; i < formData.length; i++) {
	if (!formData[i].value) {
	    newAlert('All fields are required.');
            return false;
        }
    }
    $(".alert").alert('close');
    return true;
}

function server_validation_failed (response) {
    newAlert(response.responseText);
}

function note_added(responseText, statusText, xhr, $form)  {
    $("#notes_list").append(responseText);
}
function newAlert (message) {
    $("#alert-place").append($(
	"<div class='alert " + 'alert-error' +
	    " fade in' data-alert><button class='close' data-dismiss='alert'>×</button>"
	    +message+"</div>"));
}
  </script>
</head>
<body>
<div class="navbar navbar-fixed-top">
 <div class="navbar-inner">
    <div class="container">
      <ul class='nav'>
        <li>
          <a class="brand" href="http://code.google.com/p/botan/"> Brain Overflow</a>
        </li>
        <li>
        <ul class="breadcrumb">
          <li><a href = "/notes/">Notes</a><span class="divider">/</span></li>
        </li>
      </ul>
    </div>
  </div>
</div>

<div class="container">
<div class="row">
{% if notes_list %}
    <ul id="notes_list">
    {% for note in notes_list %}
      <li><a href="/notes/{{ note.id }}/">{{ note.title }}</a></li>
    {% endfor %}
    </ul>
{% else %}
<p>No notes. Go and create one!</p>
{% endif %}
</div>
<div id="added_id"></div>
<div id="alert-place"></div>
<div class="row">
<form action="{% url notes.views.add_note %}" method="post" id="form_add">
  <div class="well form-inline">
    <input type="submit" class="btn span2" id="btn_add" value="Add">
    {{ add_form.title }}
    {{ add_form.author }}
 </div>
</form>
</div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.3/bootstrap.min.js"></script>
</body>
</html>

